/* eslint-disable no-undef */
import './index.css';
import './img/01.jpeg';
import './img/02.jpeg';
import './img/03.jpeg';
import './img/04.jpeg';

function Light($box) {
    // 装图片容器
    this.box = document.querySelector($box);
    this.arrowLeft = document.querySelector('.arrow-left');
    this.arrowRight = document.querySelector('.arrow-right');
    this.dotbox = document.querySelectorAll('.dot-box>span');
    console.log(this.dotbox);
    this.arrowLeft.innerHTML = '&gt;';
    this.arrowRight.innerHTML = '&gt;';

    // 初始值
    this.index = 1;
    this.timer;

    // 保留上一张图片
    this.lastIndex = 1;
}

// 初始化图片方法
Light.prototype.init = function () {
    console.log('初始化图片');
    this.img = new Image();
    this.img.draggable = false;
    this.img.src = `../../img/0${this.index}.jpeg`;
    this.box.appendChild(this.img);
    //绑定下一张点击事件
    this.arrowRightFn();
    // 轮播效果
    this.carousel();
};
// 点击给添加下一张图片
Light.prototype.arrowRightFn = function () {
    this.arrowRight.addEventListener('click', function () {
        console.log('下一张');
        this.index++;
        this.img.src = `../../img/0${this.index}.jpeg`;
    });
};

// 轮播
Light.prototype.carousel = function () {
    Light.prototype.timer = setInterval(() => {
        this.index += 1;
        if (this.index > 4) {
            this.index = 1;
        }
        this.img.src = `../../img/0${this.index}.jpeg`;
    }, 2000);
};

// dotbox.forEach((el, elIndex) => {
//   el.addEventListener("click", () => {
//     // 获取当前点击的小圆点下标, 更换index的值就就可以实现轮播图和小圆点下标一致
//     // eslint-disable-next-line no-undef
//     index = elIndex;
//     // 更改激活类名
//     changeActive();
//   });
// });

// changeActive 函数, 主要功能是修改激活类名

// eslint-disable-next-line no-unused-vars
function changeActive() {
    // 先移除上一张li的激活类名 li-active (当前激活对象更换了)
    // eslint-disable-next-line no-undef
    list[lastIndex].classList.remove('li-active');
    // 小圆点的激活类
    // eslint-disable-next-line no-undef
    dots[lastIndex].classList.remove('dot-active');

    // 更换激活对象
    list[index].classList.add('li-active');
    dots[index].classList.add('dot-active');

    // 更新上一次的值lastIndex
    lastIndex = index;
}

let a = new Light('.li-active');
a.init();
